<template>
	<view>
		<view class="card" v-if="true" >
			<!-- 模板 -->
			<image :src="info.Template_img" mode="" class="card-bg1"></image>
			<!-- 形象照 -->
			<image :src="imgUrl" mode="heightFix" class="card-bg2"></image>
			<view class="card-content">
				<view class="card-content-item2" v-if="user.mobile && (userInfo.Friend_Status === 2 || type === 2 ? userInfo.PhoneStatus === 0 : true)" @click="openActionSheet">
					<image :src="info.phone_img" mode=""></image>
					<text :style="{color: info.contact_color}">{{user.mobile}}</text>
				</view>
				<view class="card-content-item3" v-if="user.wechat_number && (userInfo.Friend_Status === 2 || type === 2 ? userInfo.wxStatus === 0 : true)" @click="open">
					<image :src="info.we_chat_img" mode=""></image>
					<text :style="{color: info.contact_color}">{{user.wechat_number}}</text>
				</view>
				<view class="card-content-item1" v-if="user.mailbox && (userInfo.Friend_Status === 2 || type === 2 ? userInfo.mailboxStatus === 0 : true)" @click="copy(user.mailbox)">
					<image :src="info.mailbox_img" mode=""></image>
					<text :style="{color: info.contact_color}">{{user.mailbox}}</text>
				</view>
				<view class="card-content-item4" v-if="user.company" @click="opencompany()">
					<image :src="info.address_img" mode=""></image>
					<text :style="{color: info.contact_color}">{{user.company}}</text>
				</view>
			</view>
			<view class="card-laytou">
				<div class="card-laytou-name" :style="{color: info.name_color}">{{user.nickname}}</div>
				<div class="card-laytou-jl" :style="{color: info.Identity_color}">{{user.name != '无' ? user.name : ''}}</div>
			</view>
		</view>
		<view class="hb-img">
			<l-painter :board="poster" style="width: 100%;" ref="painterRef" />
		</view>
		<wxPopupVue ref="wxPopupVueRef" :url="user.WeChat_QR_code"/>
	</view>

</template>

<script>
	import {openMap, goMap} from '@/common/map.js'
	import wxPopupVue from '../wx-popup/wx-popup.vue'
	export default {
		props: ['info', 'user', 'imgUrl','userInfo','type'],
		components:{
			wxPopupVue
		},
		data() {
			return {
				poster: {}
			}
		},
		watch:{
			info:{
				handler(val){
				
					// this.setItemList()
				},
				deep: true
			}
		},
		methods: {
			goMap,
			opencompany(){
		
				const itemList = [
					'导航',
					'复制地址'
				]
				uni.showActionSheet({
					itemList,
					success: res => {
					
						const name = itemList[res.tapIndex]
						switch (name){
							case '导航':
								if(!(this.info.lng && this.info.lat)) return this.$u.toast('暂不支持！')
								this.goMap({latitude: this.info.lat ,longitude: this.info.lng, name: this.info.address})
								break;
							case '复制地址':
								this.copy(this.info.address)
								break;
							default:
								break;
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			openActionSheet(){
				console.log('this.user', this.user)
				const itemList = [
					'呼叫',
					'复制手机号',
					'保存到通讯录'
				]
				uni.showActionSheet({
					itemList,
					success: res => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						const name = itemList[res.tapIndex]
						switch (name){
							case '呼叫':
								uni.makePhoneCall({
								  phoneNumber: this.user.mobile
								});
								break;
							case '复制手机号':
								this.copy(this.user.mobile)
								break;
							case '保存到通讯录':
								wx.addPhoneContact({
								  firstName: this.user.nickname ? this.user.nickname : '', // 联系人姓名
								  mobilePhoneNumber: this.user.mobile ? this.user.mobile : '', // 电话号码
								  success(res) {
								    console.log('添加成功', res)
								  },
								  fail(err) {
								    console.log('添加失败', err)
								  }
								})
							default:
								break;
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			open(){
				if(this.user.WeChat_QR_code) {
					this.$refs.wxPopupVueRef.show()
				} else {
					this.copy(this.user.wechat_number)
				}
				
			},
			copy(data){
				uni.setClipboardData({
					data,
					success: function () {
						uni.showToast({duration:3000,
							title:"已复制",
							icon:'none'
						})
					}
				});
			},
			setPhone(phoneNumber){
				uni.makePhoneCall({
					phoneNumber
				});
			},
			async submit() {
				let res = this.info
				let user = this.user
				let imgUrl = this.imgUrl
				let poster = {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '690rpx',
						height: '380rpx',
						background: '#fff'
					},
					views: [
						//底图
						{
							type: 'image',
							src: res.Template_img,
							//src: ossUrl + '/template/card/1/模板.png',
							//src: ossUrl + '/template/card/1/封面.png',
							css: {
								width: '100%',
								height: '380rpx',
								top: "0",
								right: "0",
								position: "absolute",
								zIndex: '5',
								// borderRadius: '30rpx'
							}
						},
						//头像
						{
							type: 'image',
							src: imgUrl,
							//src: ossUrl + '/template/card/1/模板.png',
							//src: ossUrl + '/template/card/1/封面.png',
							css: {

								height: '380rpx',
								top: "0",
								right: "0",
								position: "absolute",
								zIndex: "1",
								// borderRadius: '30rpx',
								objectFit: 'contain'
							}
						},
						//基本信息
						{
							css: {
								height: "200rpx",
								width: "340rpx",
								top: "20rpx",
								left: "20rpx",
								position: "absolute",
								zIndex: "9"
							},
							views: [
								
								//手机
								{
									css: {

										height: "",
										width: "100%",
										padding: "10rpx 10rpx 0",
										boxSizing: "border-box",
										marginBottm: "0rpx",
										display: (user.mobile && this.userInfo.PhoneStatus === 0)? '' : 'none'
									},
									views: [{
											type: 'image',
											src: res.phone_img,
											css: {
												width: '30rpx',
												height: '30rpx'
											}
										},
										{
											type: 'text',
											text: user.mobile,
											css: {
												width: '235rpx',
												// 设置右对齐
												textAlign: 'left',
												lineClamp: 1,
												flex: '1',

												paddingLeft: '15rpx',
												fontSize: '22rpx',
												fontWeight: 'bold',
												color: res.contact_color
											}
										},
									],
									type: "view"
								},
								//微信
								{
									css: {

										height: "",
										width: "100%",
										padding: "10rpx 10rpx 0",
										boxSizing: "border-box",
										marginBottm: "0rpx",
										display: (user.wechat_number && this.userInfo.wxStatus === 0) ? '' : 'none'
									},
									views: [{
											type: 'image',
											src: res.we_chat_img,
											css: {
												width: '30rpx',
												height: '30rpx'
											}
										},
										{
											type: 'text',
											text: user.wechat_number,
											css: {
												width: '235rpx',
												// 设置右对齐
												textAlign: 'left',
												lineClamp: 1,
												flex: '1',

												paddingLeft: '15rpx',
												fontSize: '22rpx',
												fontWeight: 'bold',
												color: res.contact_color
											}
										},
									],
									type: "view"
								},
								//邮箱
								{
									css: {
										height: "",
										width: "100%",
										padding: "10rpx 10rpx 0",
										boxSizing: "border-box",
										marginBottm: "0rpx",
										display: (user.mailbox && this.userInfo.mailboxStatus === 0) ? '' : 'none'
									},
									views: [{
											type: 'image',
											src: res.mailbox_img,
											css: {
												width: '30rpx',
												height: '30rpx'
											}
										},
										{
											type: 'text',
											text: user.mailbox,
											css: {
												width: '235rpx',
												// 设置右对齐
												textAlign: 'left',
												lineClamp: 1,
												flex: '1',
												paddingLeft: '15rpx',
												fontSize: '22rpx',
												fontWeight: 'bold',
												color: res.contact_color
											}
										},
									],
									type: "view"
								},
								//地址
								{
									css: {

										height: "",
										width: "100%",
										padding: "10rpx 10rpx 0",
										boxSizing: "border-box",
										marginBottm: "0rpx",
										display: user.company ? '' : 'none'
									},
									views: [{
											type: 'image',
											src: res.address_img,
											css: {
												width: '30rpx',
												height: '30rpx'
											}
										},
										{
											type: 'text',
											text: user.company,
											css: {
												width: '235rpx',
												// 设置右对齐
												textAlign: 'left',
												lineClamp: 2,
												flex: '1',
												paddingTop: '3rpx',
												paddingLeft: '15rpx',
												fontSize: '22rpx',
												fontWeight: 'bold',
												lineHeight: '25rpx',
												color: res.contact_color
											}
										},
									],
									type: "view"
								}
							],
							type: "view"
						},
						// 基础用法
						{
							css: {

								height: "200rpx",
								width: "360rpx",
								top: "240rpx",
								left: "20rpx",
								position: "absolute",
								zIndex: "9"
							},
							views: [{
									type: 'text',
									text: user.nickname,
									css: {
										// 设置右对齐
										textAlign: 'left',
										lineClamp: 1,
										paddingLeft: '15rpx',
										fontSize: '51rpx',
										width: '100%',
										color: res.name_color,
										display: user.nickname ? '' : 'none'
									}
								},
								{
									type: 'text',
									text: user.name,
									css: {
										// 设置右对齐
										textAlign: 'left',
										lineClamp: 1,
										paddingLeft: '15rpx',
										fontSize: '28rpx',
										fontWeight: 'bold',
										width: '100%',
										color: res.Identity_color,
										display: user.name != '无' ? '' : 'none'
									}
								},
							],
							type: "view"
						},
					]
				}
				this.poster = poster
				return new Promise((resolve,reject)=>{
					this.$nextTick(()=>{
						this.$refs.painterRef.canvasToTempFilePathSync({
						  fileType: "jpg",
						  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
						  pathType: 'url',
						  quality: 1,
						  success: (res) => {
						    console.log(res.tempFilePath);
						    // 非H5 保存到相册
						    // H5 提示用户长按图另存
						    resolve(res.tempFilePath)
						  },
						  fail: (err)=>{
							  console.log('err',err)
							  reject(err)
						  }
						});
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hb-img {
		width: 690rpx;
		height: 380rpx;
		position: fixed;
		border-radius: 30rpx;
		left: 120%;
		top: 0;
	}

	.card {
		width: 690rpx;
		height: 380rpx;
		position: relative;
		border-radius: 30rpx;

		.card-bg1 {
			width: 100%;
			height: 380rpx;
			top: 0;
			right: 0;
			position: absolute;
			z-index: 5;
			border-radius: 30rpx;
		}

		.card-bg2 {
			height: 380rpx;
			top: 0;
			right: 0;
			position: absolute;
			z-index: 1;
			border-radius: 30rpx;
		}

		.card-content {
			height: 210rpx;
			width: 340rpx;
			top: 20rpx;
			left: 20rpx;
			position: absolute;
			z-index: 9;

			.card-content-item1 {

				width: 100%;
				display: flex;
				padding: 10rpx 10rpx 0;
				box-sizing: border-box;
				margin-bottom: 0rpx;
				display: flex;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					// 设置右对齐
					text-align: left;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					flex: 1;
					padding-left: 15rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #000;
				}
			}

			.card-content-item2 {
				width: 100%;
				display: flex;
				padding: 10rpx 10rpx 0;
				box-sizing: border-box;
				margin-bottom: 0rpx;
				display: flex;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					// 设置右对齐
					text-align: left;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					flex: 1;
					padding-left: 15rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #000;
				}
			}

			.card-content-item3 {

				width: 100%;
				display: flex;
				padding: 10rpx 10rpx 0;
				box-sizing: border-box;
				margin-bottom: 0rpx;
				display: flex;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					// 设置右对齐
					text-align: left;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					flex: 1;
					padding-left: 15rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #000;
				}
			}

			.card-content-item4 {

				width: 100%;
				display: flex;
				padding: 10rpx 10rpx 0;
				box-sizing: border-box;
				margin-bottom: 0rpx;
				display: flex;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					// 设置右对齐
					text-align: left;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 显示的行数 */
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 1;
					padding-left: 15rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #000;
				}
			}
		}

		.card-laytou {
			height: 200rpx;
			width: 360rpx;
			top: 240rpx;
			left: 20rpx;
			position: absolute;
			z-index: 9;

			.card-laytou-name {
				text-align: left;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-left: 15rpx;
				font-size: 51rpx;
				width: 100%;
				color: #000;
			}

			.card-laytou-jl {
				text-align: left;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-left: 15rpx;
				font-size: 28rpx;
				font-weight: bold;
				width: 100%;
				color: #000;
			}
		}
	}
</style>